<template>
  <flex-box class="main-info" direction="column" center-h-v>
    <flex-box direction="column" center-h-v class="part-1" :style="style">
      <flex-box class="temperature-wrapper">
        <div class="temperature-text">28</div>
        <div class="temperature-unit">℃</div>
      </flex-box>

      <flex-box center-h-v class="weather-text-wrapper">
        <span class="weather-text">多云</span>
        <div class="icon">
          <image-box :src="require('@/assets/icon/edit.png')" size="14" />
        </div>
      </flex-box>
    </flex-box>

    <div class="tip-box">黄色雷电预警：...</div>
  </flex-box>
</template>

<script>
import FlexBox from "@/components/flex-box/index";
import ImageBox from "@/components/image-box/index";
import eventBus from "@/util/eventBus";
export default {
  name: "MainInfo",
  components: {ImageBox, FlexBox},
  data() {
    return {
      opacity: 1
    }
  },
  computed: {
    style() {
      return {
        opacity: this.opacity,
        touchStart: 0,
        touchEnd: 0,
      }
    },
  },
  methods: {
    handleScroll() {
      // console.log('test-> scrollY', window.scrollY);
      let {scrollY, innerHeight} = window;
      let opacity = 1 - scrollY / innerHeight * 4;
      if (opacity < 0.08) {
        opacity = 0
      }
      // console.log('opacity', opacity);
      if (scrollY >= 112) {
        this.opacity = opacity;
      }else {
        this.opacity = opacity;
      }
    },
    handleTouchStart(e) {
      this.touchStart = e.changedTouches[0].clientY;
    },
    handleTouchMove(e) {
      this.touchEnd = e.changedTouches[0].clientY;
      // console.log(this.touchStart, this.touchEnd);
      let data = {
        start: this.touchStart,
        end: this.touchEnd,
        isEndTouch: false
      };
      let distance = this.touchEnd - this.touchStart;
      if (distance < 50 && distance > 0) {
        eventBus.$emit('touchInfo', data);
      }
    },
    handleTouchEnd(e) {
      this.touchEnd = e.changedTouches[0].clientY;
      let distance = this.touchEnd - this.touchStart;
      let data = {
        start: this.touchStart,
        end: distance > 50 ? 50 : distance,
        isEndTouch: true
      };
      eventBus.$emit('touchInfo', data);
    }
  },

  created() {
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('touchstart', this.handleTouchStart)
    window.addEventListener('touchmove', this.handleTouchMove);
    window.addEventListener('touchend', this.handleTouchEnd);
  },

  mounted() {

  },
  beforeDestroy() {
    console.log('main-info.vue beforeDestroy');
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('touchstart', this.handleTouchStart)
    window.removeEventListener('touchmove', this.handleTouchMove);
    window.removeEventListener('touchend', this.handleTouchEnd);
  }

}
</script>

<style lang="scss" scoped>
.main-info {
  height: 65vh;
  position: relative;

  .part-1 {
    .temperature-wrapper {
      margin-top: 40px;
      .temperature-text {
        font-size: 8.6em;
        line-height: 0.76;
      }
      .temperature-unit {
        font-weight: bold;
      }
    }
  }

  .weather-text-wrapper {
    margin-top: 20px;
    .weather-text {
      font-size: 20px;
      font-weight: 600;
    }
    .icon {
      border-radius: 50%;
      background-color: rgba(255,255,255, .3);
      padding: 5px;
      width: 28px;
      height: 28px;
      margin-left: 10px;
    }
  }

  .tip-box {
    background-color: rgba(255,255,255, .3);
    border-radius: 20px;
    width: 100%;
    padding: 20px;
    text-align: left;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
